<template>
	<el-dialog
		v-if="visible"
		title="代理****的收益比例明细"
		:visible="visible"
		width="1000px"
		center
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<div
			style="margin-top: 20px;display: flex;justify-content: space-between;margin-bottom: 20px;"
		>
			<span>代理账号:222</span>
			<span>代理层级:222</span>
			<span>直属上级:222</span>
			<span>总代理:222</span>
			<span>业务模式:222</span>
			<span>三方场馆是否有占成:222</span>
		</div>
		<!-- 应收返点统计 -->
		<p class="name">
			团队信息:
		</p>
		<div class="block-content">
			<ReportDetailTable
				:tableDataColumn="tableDataColumn1"
				:tableDataList="proxyRebateList1"
			/>
		</div>
		<!-- 代理发放返水明细 -->
		<div class="mt10">
			<p class="name">团队返点比例:</p>
			<div class="mt10">
				<ReportDetailTable
					:tableDataColumn="tableDataColumn2"
					:tableDataList="proxyRebateList2"
				/>
			</div>
		</div>
		<!-- 平台发放返水明细 -->
		<div class="mt10">
			<p class="name">团队占成比例:</p>
			<div class="mt10">
				<ReportDetailTable
					:tableDataColumn="tableDataColumn3"
					:tableDataList="platformRebateList3"
				/>
			</div>
		</div>
		<!-- 平台发放返水明细 -->
		<div class="mt10">
			<p class="name">默认会员返水比例(平台发放):</p>
			<div class="mt10">
				<ReportDetailTable
					:tableDataColumn="tableDataColumn4"
					:tableDataList="platformRebateList4"
				/>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
export default {
	components: {
		ReportDetailTable: () => import('@/components/ReportDetailTable')
	},
	mixins: [list],
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detailData: {
			type: Object,
			required: true
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
		// 格式:
		// detailData: {
		// 	proxyId:'935950203562270737',
		//  reportType:1,
		// 	reportDate:'20231124'
		// }
	},
	data() {
		return {
			proxyRebateList1: [],
			proxyRebateList2: [],
			proxyRebateList3: [],
			proxyRebateList4: [],
			platformRebateList1: [],
			platformRebateList2: [],
			tableData: '',
			tableDataColumn1: [
				{
					prop: 'memberName',
					label: '结算周期',
					minWidth: '80',
					align: 'center',
					showTip: true,
					renderType: 'defautlSolt'
				},
				{
					prop: 'personRebateAmount',
					label: '团队人数',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'personRebateAmount',
					label: '新增团队人数',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'personRebateAmount',
					label: '团队活跃人数',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'personRebateAmount',
					label: '直属会员数',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'personRebateAmount',
					label: '新增直属会员数',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'personRebateAmount',
					label: '活跃直属会员数',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'personRebateAmount',
					label: '下级代理数',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'personRebateAmount',
					label: '新增下级代理数',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				}
			],
			tableDataColumn2: [
				{
					prop: 'venueName',
					label: '德州俱乐部服务费团队返点',
					minWidth: '150',
					align: 'center',
					showTip: true,
					renderType: 'defautlSolt'
				},
				{
					prop: 'personRebateAmount',
					label: '真人团队返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'rebateRatio',
					label: '体育团队返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				},
				{
					prop: 'totalPumpContribution',
					label: '彩票团队返点',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amountWithTexasDetail'
				},
				{
					prop: 'totalPumpContribution',
					label: '棋牌团队返点',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amountWithTexasDetail'
				},
				{
					prop: 'totalPumpContribution',
					label: '电竞团队返点',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amountWithTexasDetail'
				}
			],
			tableDataColumn3: [
				{
					prop: 'venueName',
					label: '德州保险团队占成',
					minWidth: '150',
					align: 'center',
					showTip: true,
					renderType: 'defautlSolt'
				},
				{
					prop: 'personRebateAmount',
					label: '真人团队占成',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'rebateRatio',
					label: '体育团队占成',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				},
				{
					prop: 'validBetAmount',
					label: '彩票团队占成',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'validBetAmount',
					label: '棋牌团队占成',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'validBetAmount',
					label: '电竞团队占成',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				}
			],
			tableDataColumn4: [
				{
					prop: 'venueName',
					label: '德州俱乐部服务费会员返点',
					minWidth: '150',
					align: 'center',
					showTip: true,
					renderType: 'defautlSolt'
				},
				{
					prop: 'personRebateAmount',
					label: '真人会员返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'rebateRatio',
					label: '体育会员返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				},
				{
					prop: 'rebateRatio',
					label: '彩票会员返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				},
				{
					prop: 'rebateRatio',
					label: '棋牌会员返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				},
				{
					prop: 'rebateRatio',
					label: '电竞会员返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				}
			]
		}
	},
	mounted() {
		this.getCurRebateDetailList()
		// this.getProxyRebateDetailList()
		// this.getPlatformRebateList()
	},
	methods: {
		// 关闭
		handleClose() {
			this.closeDialog(false)
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0 && this.headerStyle !== 2) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		},
		// 本期返点明细
		getCurRebateDetailList() {
			this.tableLoading = true
			this.proxyRebateList = []
			const params = {
				...this.detailData
			}
			this.$api
				.memberRebateDataApiDetail(params)
				.then((res) => {
					this.tableData = res?.data || []
					this.tableLoading = false
					console.log(this.tableData)
					let e1 = {
						memberName: this.tableData.memberName,
						personRebateAmount: this.tableData.personRebateAmount
					}
					this.proxyRebateList.push(e1)
					for (let index in this.tableData.platformFlagRebate) {
						let e = this.tableData.platformFlagRebate[index]
						if (e.platformFlag == 0) {
							if (e.venueName.indexOf('俱乐部') != -1) {
								this.proxyRebateList1.push(e)
							} else {
								this.proxyRebateList2.push(e)
							}
						} else {
							if (e.venueName.indexOf('俱乐部') != -1) {
								this.platformRebateList1.push(e)
							} else {
								this.platformRebateList2.push(e)
							}
						}
					}
				})
				.catch(() => {
					this.tableLoading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.name {
	font-weight: 600;
	font-size: 20px;
	color: #303133;
	margin-bottom: 10px;
}
.block-content {
	position: relative;
	width: 100%;
	margin-top: 10px;
	word-break: break-all;
}
</style>
